<dom-module id="x-keyframes">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        border: 10px solid blue;
        left: 0px;
        /* Prefix required by Safari <= 8 */
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }

      :host([animated]) {
        /* Prefix required by Safari <= 8 */
        -webkit-animation-name: x-keyframes-animation;
        animation-name: x-keyframes-animation;
      }

      /* Prefix required by Safari <= 8 */
      @-webkit-keyframes x-keyframes-animation {
        0% {
          left: var(--keyframes0, 0px);
        }

        100% {
          left: var(--keyframes100, 10px);
        }
      }
      @keyframes x-keyframes-animation {
        0% {
          left: var(--keyframes0, 0px);
        }

        100% {
          left: var(--keyframes100, 10px);
        }
      }
    </style>
    x-keyframes
  </template>
  <script>
    Polymer({
      is: 'x-keyframes',
      properties: {
        animated: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        }
      }
    });
  </script>
</dom-module>
<dom-module id="x-gchild">
  <template>
    <!-- styles can be in templates -->
    <style>
      :host-context(.wide) #target {
        border: 10px solid orange;
      }
    </style>
    <div id="target">x-gchild</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-gchild'
  });
</script>

<dom-module id="x-child">
  <template>
    <div id="simple">simple</div>
    <div id="complex1" class="scoped">complex1</div>
    <div id="complex2" selected>complex2</div>
    <div id="media">media</div>
    <div id="shadow" class="shadowTarget">shadowTarget</div>
    <div id="deep" class="deepTarget">deepTarget</div>
    <x-gchild id="gchild1"></x-gchild>
    <x-gchild id="gchild2" class="wide"></x-gchild>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-child',
    hostAttributes: {
      class: 'nug'
    }
  });
</script>

<dom-module id="x-child2">
  <style>
    :host(.wide) #target{
      border: none;
    }
  </style>
  <template>
    <div id="target">x-child2</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-child2',
    _scopeCssViaAttr: true
  });
</script>

<dom-module id="x-scope-class">
  <template>
    <div id="scope">Trivial</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-scope-class'
  });
</script>


<dom-module id="x-styled">
  <style>
    :host {
      display: block;
      border: 1px solid orange;
      --keyframes100: 100px;
    }

    :host(.wide) {
      border-width: 2px;
    }

    :host(.wide)::after {
      content: '-content-';
    };

    #keyframes2.special {
      --keyframes100: 200px;
    }

    #simple {
      border: 3px solid orange;
    }

    .scoped, [selected] {
      border: 4px solid pink;
    }

    @media(max-width: 10000px) {
      .media {
        border: 5px solid brown;
      }
    }

    .container ::content > * {
      border: 6px solid navy;
    }

    x-child::shadow .shadowTarget {
      border: 7px solid tomato;
    }

    x-child /deep/ .deepTarget {
      border: 8px solid red;
    }

    #priority {
      border: 9px solid orange;
    }

    x-child2.wide::shadow #target {
      border: 12px solid brown;
    }

    .container1 > ::content > .content1 {
      border: 13px solid navy;
    }

    .container2 > ::content .content2 {
      border: 14px solid navy;
    }

    .computed {
      border: 15px solid orange;
    }

    .computeda {
      border: 20px solid orange;
    }

    #child {
      border: 16px solid tomato;
      display: block;
    }

    svg {
      margin-top: 20px;
    }

    #circle {
      fill: seagreen;
      stroke-width: 1px;
      stroke: tomato;
    }
  </style>
  <template>
    <content select=".blank"></content>
    <div id="simple">simple</div>
    <div id="complex1" class="scoped">complex1</div>
    <div id="complex2" selected>complex2</div>
    <div id="media" class="media">media</div>
    <div class="container1">
      <content select=".content1"></content>
    </div>
    <div class="container2">
      <content select=".content2"></content>
    </div>
    <div class="container">
      <content></content>
    </div>
    <x-child id="child"></x-child>
    <div id="priority">priority</div>
    <x-child2 class="wide" id="child2"></x-child2>
    <div id="computed" class$="{{computeClass(aClass)}}">Computed</div>
    <div id="repeatContainer">
      <template id="repeat" is="dom-repeat" items="{{items}}">
        <a class$="{{aaClass}}">A Computed</a>
      </template>
    </div>
    <svg height="25" width="25">
      <circle id="circle" cx="12" cy="12" r="10"></circle>
    </svg>
    <x-scope-class id="scopeClass"></x-scope-class>
    <x-keyframes id="keyframes"></x-keyframes>
    <x-keyframes id="keyframes2"></x-keyframes>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-styled',

    properties: {
      items: {value: [{}]}
    },

    computeClass: function(className) {
      return className;
    }

  });
</script>

<dom-module id="x-button">
  <style>
    :host {
      border: 10px solid beige;
    }

    :host(.special) {
      border: 11px solid beige;
    }

  </style>
  <template>
    Button!
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-button',
    extends: 'button'
  });
</script>

<dom-module id="x-Mixed-Case">
  <style>
    :host {
      border: 13px solid beige;
    }

  </style>
  <template>
    Mixed-Case
  </template>
  <script>
    Polymer({
      is: 'x-Mixed-Case'
    });
  </script>
</dom-module>

<dom-module id="x-Mixed-Case-Button">
  <style>
    :host {
      border: 14px solid beige;
    }

  </style>
  <template>
    Mixed-Case
  </template>
  <script>
    Polymer({
      is: 'x-Mixed-Case-Button',
      extends: 'button'
    });
  </script>
</dom-module>


<template id="dynamic">
  <div class="added">
    Added
    <div class="sub-added">
      Sub-added
    </div>
    </div>
  </div>
</template>

<dom-module id="x-dynamic-scope">
  <style>
    .added {
      border: 17px solid beige;
    }

    .sub-added {
      border: 18px solid #fafafa;
    }
  </style>
  <template>
    <div id="container"></div>
  </template>
</dom-module>
<script>
(function() {
  var doc = document._currentScript.ownerDocument;
  var dynamic = doc.querySelector('template#dynamic');

  Polymer({
    is: 'x-dynamic-scope',
    ready: function() {
      // setup node for scope watching
      this.scopeSubtree(this.$.container, true);
      // simulate 3rd party action by using normal dom to add to element.
      var dom = document.importNode(dynamic.content, true);
      this.$.container.appendChild(dom);
    }
  });
})();
</script>

<template id="dynamic-style-template">
  <style>
    :host {
      border: 40px solid tomato;
    }
  </style>
  <div>big border</div>
</template>

<script>
(function() {
  var doc = document._currentScript.ownerDocument;
  var template = doc.querySelector('template#dynamic-style-template');

  Polymer({
    is: 'x-dynamic-template',
    beforeRegister: function() {
      this._template = template;
    }
  });
})();
</script>

<template id="svg">
  <svg class="svg" viewBox="0 0 24 24">
    <circle id="circle" r="12" cx="12" cy="12" />
  </svg>
</template>

<dom-module id="x-dynamic-svg">
  <template>
    <style>
      .svg {
        height: 24px;
        width: 24px;
      }
      #circle {
        fill: red;
        fill-opacity: 0.5;
      }
    </style>
    <div id="container"></div>
  </template>
  <script>
    (function() {
      var doc = document._currentScript.ownerDocument;
      var template = doc.querySelector('template#svg');

      Polymer({
        is: 'x-dynamic-svg',
        ready: function() {
          this.scopeSubtree(this.$.container, true);
          var dom = document.importNode(template.content, true);
          this.$.container.appendChild(dom);
        }
      });
    })();
  </script>
</dom-module>

<dom-module id="x-specificity">
  <template>
    <style>
      :host {
        border-top: 1px solid red;
      }
      :host(.bar) {
        border-top: 2px solid red;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({is: 'x-specificity'});
  </script>
</dom-module>

<style is="custom-style">
  :root {
    --x-specificity-parent : {
      border: 10px solid blue;
    };
    --x-specificity-nested : {
      border: 3px solid red;
    };
  }
</style>

<dom-module id="x-specificity-parent">
  <template>
    <style>
      ::content > :not(template) {
        @apply(--x-specificity-parent);
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({is: 'x-specificity-parent', extends: 'div'});
  </script>
</dom-module>

<dom-module id="x-specificity-nested">
  <template>
    <style>
      :host {
        @apply(--x-specificity-nested);
      }
    </style>
  </template>
  <script>
    Polymer({is: 'x-specificity-nested', extends: 'div'});
  </script>
</dom-module>

<style is="custom-style">
  :root {
    --x-overriding : {
      border-top: 1px solid red;
    }
  }
</style>

<dom-module id="x-overriding">
  <template>
    <style>
      .red {
        @apply(--x-overriding);
      }
      .green {
        @apply(--x-overriding);
        border-top: 2px solid green;
      }
      .red-2 {
        border-top: 2px solid green;
        @apply(--x-overriding);
      }
      .blue {
        @apply(--x-overriding);
        border-top: 3px solid blue;
      }
    </style>

    <div class="red">red</div>
    <div class="green">green</div>
    <div class="red-2">green-2</div>
    <div class="blue">blue</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-overriding'
  });
</script>

<dom-module id="x-attr-selector">
  <template>
    <style>
      #foo1 ~ #bar1 {
        border: 2px solid red;
      }

      #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2]  {
        border: 4px solid red;
      }

      #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] ~ #foo3[attr~=foo3][a~=a] ~ #bar3[attr~=bar3][a~=a] {
        border: 6px solid red;
      }
    </style>
    <div id="foo1"></div>
    <div id="bar1">bar1</div>
    <div id="foo2" attr="foo2"></div>
    <div id="bar2" attr="bar2">bar2</div>
    <div id="foo3" attr="foo3" a="a"></div>
    <div id="bar3" attr="bar3" a="a">bar3</div>

  </template>
  <script>
    Polymer({is: 'x-attr-selector'});
  </script>
</dom-module>

<script>
  Polymer({
    is: 'x-scope-no-class',
    ready: function() {
      this.scopeSubtree(this, true);
    }
  });
</script>

<dom-module id="shared-style">
  <template>
    <style>
      :host(x-shared1) {
        display: block;
        border: 2px solid orange;
      }

      :host(x-shared2) {
        display: block;
        border: 4px solid orange;
      }

      :host(.x-shared1) {
        top: 10px;
      };
    </style>
  </template>
</dom-module>

<dom-module id="x-shared1">
  <template>
    <style include="shared-style"></style>
    x-shared1
  </template>
  <script>
    Polymer({is: 'x-shared1'});
  </script>
</dom-module>

<dom-module id="x-shared2">
  <template>
    <style include="shared-style"></style>
    x-shared2
  </template>
  <script>
    Polymer({is: 'x-shared2'});
  </script>
</dom-module>

<dom-module id="x-content">
  <template>
    <style>
      ::content > .auto-content {
        border: 2px solid orange;
      }

      .bar, ::content .complex-descendant {
        border: 4px solid red;
      }

      .bar, ::content > .complex-child {
        border: 6px solid navy;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({is: 'x-content'});
  </script>
</dom-module>

<dom-module id="x-slotted">
  <template>
    <style>
    ::slotted(.auto-content) {
      border: 2px solid orange;
    }
    .bar, ::slotted(.complex-child) {
      border: 6px solid navy;
    }
    #container ::slotted(*) {
      border: 8px solid green;
    }
    </style>
    <div id="container">
      <slot name="container"></slot>
    </div>
    <slot></slot>
  </template>
  <script>
    Polymer({is: 'x-slotted'});
  </script>
</dom-module>

<dom-module id="root-styles">
  <template>
    <style>
    :root {
      color: rgb(123, 123, 123);
      --root-padding: 10px;
    }
    :host > * {
      border: 2px solid black;
      --host-margin: 10px;
    }
    #child {
      padding: var(--root-padding);
      margin: var(--host-margin);
    }
    </style>
    <div id="child">Child</div>
  </template>
  <script>
  Polymer({is: 'root-styles'});
  </script>
</dom-module>
